<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户选取角色列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}"
          href="../../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" href="../../../static/layuimini/css/public.css"
          media="all">
    <style>
        body {
            background-color: #fff;
            padding: 0;
            margin: 0;
        }
        body .layui-layer-btn {
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }
        body .layui-form.layui-border-box.layui-table-view {
            height: 460px;
        }
        .padding-container{
            padding: 10px;
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<!--    <div class="layuimini-main">-->
<div class="padding-container">

    <form class="layui-form" lay-filter="tableToolForm">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 42px;padding-left: 0px;">角色名</label>
            <div class="layui-inline">
                <input id="roleName" class="layui-input" name="roleName" type="text" placeholder="输入关键字">
            </div>

            <div class="layui-inline">
                <button class="layui-btn" id="btn-search">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary" id="btn-reload">
                    <i class="layui-icon">&#xe666;</i>清空搜索
                </button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
</div>

<div class="layui-layer-btn layui-layer-btn-">
    <a id="btn_add_role" class="layui-layer-btn0" lay-filter="btn_add_role">设置选中</a>
    <!--    <a id="btn_remove_role" class="layui-layer-btn0" lay-filter="btn_remove_role" lay-submit>添加角色</a>-->
    <a id="edit_cancel" class="layui-layer-btn1">关闭</a>
</div>

<!--    </div>-->
<!--</div>-->
<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" src="../../../static/layuimini/lib/layui-v2.5.5/layui.js"
        charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        var userTable = table.render({
            elem: '#currentTableId',
            url: '[[@{/}]]manage/role/list?userId=[[${param.userId}]]&idEq=false',
            cols: [
                [
                    {type: "checkbox", minWidth: 50},
                    {field: 'roleId', minWidth: 80, title: 'ID'},
                    {field: 'roleName', minWidth: 120, title: '角色名称'},

                ]
            ],
            limits: [10],
            limit: 10,
            page: true,
            skin: 'line'
        });

        form.on('submit(tableToolForm)', function (data) {
            return false;
        });

        //搜索
        $('#btn-search').click(function () {
            var roleName = $('#roleName').val();

            if (roleName.trim().length == 0) {
                layer.msg('请输入要搜索的内容');
                return;
            }

            // userTable.reload({
            table.reload('currentTableId', {
                where: { //设定异步数据接口的额外参数，任意设
                    idEq: false
                    , roleName: roleName
                    , userId: [[${param.userId}]]
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , done: function () {
                    this.where = {};//清空查询参数
                }
            }); //只重载数据
        });

        //清空搜索
        $('#btn-reload').click(function () {
            $('#roleName').val('');
            table.reload('currentTableId', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        });

        //添加角色
        $('#btn_add_role').click(function (){
            var dataList = table.checkStatus('currentTableId').data;
            var ids = [];
            $(dataList).each(function () {
                ids.push(this.roleId);
            });
            console.log(ids);
            parent.layer.load(2);
            $.ajax({
                type: 'post',
                url: '[[@{/}]]manage/user/userAddRole',
                data: {userId:[[${param.userId}]],roleIds:ids},
                dataType: 'json',
                traditional: true,//传统方式传递数组
                success: function (result) {
                    console.log(result);
                    if (result.success){
                        parent.layer.msg("保存成功",{ shift: -1, time: 500 },function () {
                            cancel();
                        });

                    }else{
                        parent.layer.msg(result.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    parent.layer.msg(textStatus);
                },
                complete: function () {
                    parent.layer.closeAll('loading');
                }
            });
        });
        //取消
        $('#edit_cancel').click(function () {
            cancel();
        });

        function cancel() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
    });
</script>

</body>
</html>